<template>
  <div>
    <van-nav-bar
      fixed
      left-arrow
      :border="false"
      title="代理邀请"
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top">
      <div v-if="gradeList&&gradeList.length>0" class="mg-32">
        <div v-for="(item,index) in gradeList" :key="index" class="item flex-s-c" @click="showInviteImg(item)">
          <div>
            <p class="title">{{ item.Name }}邀请二维码</p>
            <p class="text">已申请：{{ item.InviteCount||0 }}</p>
          </div>
          <div class="link-btn bg-primary">立即邀请</div>
        </div>
      </div>
      <div v-else class="mg-32">
        无可邀请名额
      </div>
    </div>

    <!-- 代理邀请弹窗 -->
    <invite v-show="shareData.show" :qr-page-url="qrPageUrl" :invite-info="inviteInfo" @close="shareData.show=false" />
  </div>
</template>

<script>
import invite from 'components/hndy/invite'
import shareimg from 'assets/images/sharelogo.jpg'
import { GetInvitDealerConfigData, AddInvitDealer } from 'api/store'
export default {
  components: {
    invite
  },

  data() {
    return {
      gradeList: [],
      microInfo: {},
      storeInfo: {},
      data: {},
      shareData: {
        show: false,
        showConfirmButton: false
      },
      requestParams: {},
      requestData: {},
      qrPageUrl: '',
      inviteInfo: {}
    }
  },
  computed: {

  },
  created() {
    console.log(this.$LocalDomain)
    this.GetInvitDealerConfigData()
  },
  activated() {},
  methods: {
    showInviteImg(data) {
      const that = this
      that.inviteInfo.GradeName = data.Name
      that.requestData.dealerGradeId = data.ID
      that.requestData.validStartTime = new Date()
      that.requestData.validEndTime = new Date(new Date().valueOf() + that.microInfo.InvitValidTime * 60 * 60 * 1000)
      that.AddInvitDealer(that.requestParams, that.requestData)
    },
    GetInvitDealerConfigData() {
      const that = this
      GetInvitDealerConfigData().then(res => {
        if (res && res.Data) {
          that.gradeList = res.Data.GradeList
          that.microInfo = res.Data.MicroInfo
          that.storeInfo = res.Data.StoreInfo

          // 邀请人信息
          that.inviteInfo.Face = that.storeInfo.Face

          // 产品线
          that.requestData.lineIds = ''
          if (res.Data.ProductLines && res.Data.ProductLines.length > 0) {
            res.Data.ProductLines.forEach(item => {
              that.requestData.lineIds += item.ID + ','
            })
          }
          // 分享标题和内容
          let name = ''
          if (that.storeInfo.V_RealName) {
            name = that.storeInfo.V_RealName
          } else if (that.storeInfo.V_NickName) {
            name = that.storeInfo.V_NickName
          } else if (that.storeInfo.ContactName) {
            name = that.storeInfo.ContactName
          } else if (that.storeInfo.Name) {
            name = that.storeInfo.Name
          }
          that.inviteInfo.Name = name
          if (that.microInfo.WxShareTitle) {
            that.requestParams.WxShareTitle = that.microInfo.WxShareTitle.replace('[昵称]', name)
          }
          if (that.microInfo.WxShareContent) {
            that.requestParams.WxShareContent = that.microInfo.WxShareContent.replace('[昵称]', name)
          }
        }
      })
    },
    AddInvitDealer(params, data) {
      const that = this
      AddInvitDealer(params, data).then(res => {
        if (res && res.Data) {
          that.qrPageUrl = 'data:image/png;base64,' + res.Data.QrPageUrl
          const link = that.$LocalDomain + '/m/user/UserInformation?code=' + res.Data.Number
          const imgUrl = that.$LocalDomain +'/'+ shareimg
          const _obj = {
            title: that.requestParams.WxShareTitle, // 分享标题
            desc: that.requestParams.WxShareContent, // 分享描述
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl
          }
          this.$utils.updateAppMessageShareData(_obj)
          this.$utils.updateTimelineShareData(_obj)
          this.$forceUpdate()
          that.shareData.show = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.item{
  display: flex;
  background: #fff;
  border-radius: 100px;
  padding: 36px 36px 36px 68px;
  &:not(:last-child){
    margin-bottom: 32px;
  }
  .title{
    font-size: 32px;
    font-weight: bold;
  }
  .text{
    margin-top: 20px;
    font-size: 28px;
  }
  .link-btn{
    color: #fff;
    padding: 0 30px;
    line-height: 60px;
    font-size: 26px;
    border-radius: 30px;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 20px;
  }
}

</style>
